<template>
    <div class="wrap-content">
        <span class="title">{{ homeInfo.title }}</span>
        <span class="subtitle">{{ homeInfo.subTitle }}</span>
        <div class="content">
            todo next
            <!-- <p>
                1: 简历亮点 从0到1独立负责负，结合公司自身的业务脚手架搭,
                推进落地团队研发规范为什么要有企业级中台解决方案
            </p>
            <p>
                2:一个企业级中后台前端/设计解决方案，类似开源的 Element UI, Arco
                Design, AntDesign 的设计价值观，
                在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计
            </p>
            <p>
                3:这种开源的都是纯组件，往往我们的在业务中，需要我们在纯组件的基础之上进行二次封装，
                而且还要贴近企业级的最佳实战,
            </p> -->
        </div>
        <div class="op-button">
            <el-button round size="large" type="primary" @click="toQuickStart">
                快速开始
                <i-ep-right></i-ep-right>
            </el-button>
            <el-button round size="large" @click="toGitHub">Github</el-button>
        </div>
        <!-- <div class="shields-icon">
            <ShieldsIcon></ShieldsIcon>
        </div> -->
        <hr />
        <el-form
            :inline="true"
            label="名称"
            :model="selected_data"
            class="search-form"
        >
            <el-form-item>
                <el-input
                    v-model="selected_data.title"
                    placeholder="请输入名称"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="selected_data.introduce"
                    placeholder="请输入详情"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearchGoods()"
                    >查询</el-button
                >
            </el-form-item>
        </el-form>
        <el-table :data="computedDataList" border style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                width="180"
            ></el-table-column>
            <el-table-column
                prop="title"
                label="名称"
                width="180"
            ></el-table-column>
            <el-table-column prop="introduce" label="详情"></el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, computed } from "vue";
import { getGoodsList } from "@/api/user";
import ShieldsIcon from "@/views/home/components/ShieldsIcon.vue";

import { useHomeStoreHook } from "@/store/home";
const store = useHomeStoreHook();
// 商品接口
export interface IGoods {
    userId: number; // 商品归属用户id
    id: number; // 商品id
    title: string; // 商品标题
    introduce: string; // 商品介绍
}
// 展示的商品数据
let goods_list: reactive<IGoods[]> = [];
let selected_data = reactive({
    userId: 0,
    id: 0,
    title: "",
    introduce: "",
    current_page: 1,
    data_count: 0,
    single_page_size: 5,
});
const homeInfo = {
    title: store.title,
    subTitle: store.subTitle,
};

const data = reactive({}) as IGoods[];

const onSearchGoods = () => {};

onMounted(() => {
    getGoodsList().then((res) => {
        goods_list = res.data;
        selected_data.data_count = res.data.length;
    });
});
// 计算属性, 切割出实际上需要展示的数据
let computedDataList = computed(() => {
    return goods_list.slice(
        selected_data.current_page - 1 * selected_data.single_page_size,
        selected_data.current_page * selected_data.single_page_size,
    );
});
console.log("computedDataList", computedDataList);

// 跳转到快速开始页面
const toQuickStart = () => {
    window.open("https://t.zsxq.com/03rfQVF6I");
};

// 跳转到GitHub页面
const toGitHub = () => {
    window.open("https://t.zsxq.com/03rfQVF6I");
};
</script>

<style lang="less" scoped>
.wrap-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    height: max-content;
    flex-direction: column;

    .title {
        font-size: 60px;
        font-weight: 700;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(to right, #409eff, #ffc76b);
    }

    .subtitle {
        font-size: 40px;
        font-weight: 500;
        color: #213547;
    }

    .content {
        margin: 20px 0;
        font-size: 16px;
        color: #767676;
    }

    .op-button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;

        > :last-child {
            background-color: #f1f1f1;
        }
    }

    .shields-icon {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}
</style>
